<template>
	<view class="fxcp-box">
		<view class="jindu">
			<image src="http://ai.ylcaifu.com/appimg/images/4.0-%E8%B4%A2%E5%AF%8C/4.1-%E6%99%BA%E6%8A%95-%E9%A3%8E%E9%99%A9%E6%B5%8B%E8%AF%84/android/drawable-xhdpi/jindutiaochang.png" mode="widthFix"></image>
		</view>
		<view class="ques-box">
			<view class="ques-item" v-for="(item,key) in questions">
				<view class="ques-title">
					{{item.title}}
				</view>
				<view class="ques-answer-box">
					<view class="ques-answer-item" v-for="(value,index) in item.answers" @click="select(key,index)" :class="{'focus' :questions[key].select==index}">
						{{value.xuanxiang}}.{{value.answer}}
					</view>
				</view>
			</view>
		</view>
		<view class="questionBox">
			<view class="question" @click="toCepingjieguo">
				<label class="iconfont">&#xe66a;</label>提交
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				questions:[{
					select:false,
					id:0,
					title:'1.您的主要经济来源是？',
					answers:[{
						xuanxiang:'A',
						answer:'工资、劳务报酬'
					},
					{
						xuanxiang:'A',
						answer:'生产经营所得'
					},{
						xuanxiang:'A',
						answer:'利息、股息、转让登金融资产性收入'
					},
					{
						xuanxiang:'A',
						answer:'出租、出售房地产等金融资产性收入'
					},{
						xuanxiang:'A',
						answer:'无固定收入'
					}]
				},{
					select:false,
					id:1,
					title:'1.您的职业稳定性如何',
					answers:[{
						xuanxiang:'A',
						answer:'很稳定'
					},
					{
						xuanxiang:'A',
						answer:'稳定'
					},{
						xuanxiang:'A',
						answer:'一般稳定'
					},
					{
						xuanxiang:'A',
						answer:'不稳定'
					},{
						xuanxiang:'A',
						answer:'很不稳定'
					}]
				}]
			};
		},methods:{
			toCepingjieguo(){
				uni.navigateTo({
					url: '../touzibaogao/touzibaogao',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			select(key,index){
				this.questions[key].select=index
				console.log(this.questions[key].select)
			}
		}
	}
</script>

<style>
	.focus{
		background: #eee;
	}
	.jindu {
		padding: 10px ;
	
		
	}
	.jindu image{
		width: 100%;
	}
	.ques-box {
		background: rgb(255, 255, 255);
		
	}

	.ques-title {
		font-size: 15px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 80upx;
		padding:0 42upx
	}

	.ques-answer-box {
		
		
	}

	.ques-answer-item {

		text-indent: 60upx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 50upx;
	}
	.questionBox{
		display: flex;
		flex-direction: row;
		justify-content: center;
		width:100%;
		padding: 40upx 0;
		text-align: center;
		background: rgb(255, 255, 255);
		
	}
	.question {
		width: 240upx;
		height: 70upx;
		background: linear-gradient(-90deg, rgba(196, 156, 90, 1) 0%, rgba(226, 196, 138, 1) 100%);
		border-radius: 35px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: rgb(255,255,255);
		
	}
	label{
		margin-right: 10upx;
	}
</style>
